<template>
	<div class="app-container">
		<div class="bgWhite radius8 pb30">
			<div class="plr20 fb fs16 border-bottom pb25 pt25 flex col-center row-between">
				秘籍管理
				<el-button type="defaultBtn" @click="handleSend()" v-hasPermi="['book:add']">发布秘籍</el-button>
			</div>
			<div class="p20">
				<div>
					<sapn class="tabItem text-center fs14 mr20 cursor" 
					v-for="(item,i) in tabArr" :key="i" :class="{'active':item.id === queryParams.status}"
					@click="changeTab(item)"
					>
						{{item.name}}({{item.total}})
					</sapn>
				</div>
				<div class="mt30">
					<div class="flex col-top radius8 border1 p20 mb20 cursor relative" 
					v-for="(item,index) in list" :key="index"
					@click="handleDetail(item)"
					>
						<div class="edit">
							<span class="mr10" @click.stop="handleItem(item)"
							v-hasPermi="['book:remove']"
							>删除</span>
							<span @click.stop="cheatsDetail(item)" v-if="item.status == 1"
							v-hasPermi="['book:edit']"
							>编辑</span>
						</div>
						<img width="140" height="140" class="radius8" :src="item.mainImage" alt="" />
						<div class="ml20 pt5">
							<div>
								<div class="fs18 fb">{{item.title}}</div>
								<div class="fs16 color2 mt15 text-line-3" style="height: 75px;">
									{{item.description}}
								</div>
							</div>
							<div class="fs14 color2">
								{{item.userName}} {{item.time}}
							</div>
						</div>
					</div>
					<div class="text-center mt30">
						<span class="loadMore cursor" @click="loadMore()">{{total == list.length ? '没有更多了' : '加载更多'}}</span>
					</div>
				</div>
			</div>
		</div>
		<el-dialog :title="isEdit == 0 ? '发布秘籍' : '编辑秘籍'" center v-model="dialogVisible" width="900" class="radius8" :before-close="handleClose">
			<div>
				<el-form class="pt20" style="padding-bottom: 0;" label-width="80px" :model="form" ref="formRef"
					:rules="rules">
					<el-form-item label="标题" prop="title" style="margin-right:0;">
						<el-input v-model="form.title" placeholder="秘籍标题" class="resetInput" size="large" style="width: 534px;" />
					</el-form-item>
					<el-form-item label="类型" prop="categoryId">
						<div class="flex col-center">
							<el-select v-model="form.categoryId" placeholder="请选择类型" size="large" style="width: 534px;">
								<el-option v-for="dict in cateList" :key="dict.id" :label="dict.categoryName"
									:value="dict.id" />
							</el-select>
							<span class="fs14 cursor main-color disInBlock ml20" @click="dialogCate()">类型管理</span>
						</div>
					</el-form-item>
					<el-form-item label="描述" prop="description">
						<el-input size="large" type="textarea" resize="none" class="textReset" style="width: 534px;"
							:rows="5" v-model="form.description" placeholder="请输入描述信息" />
					</el-form-item>
					<el-form-item label="主图" prop="mainImage">
						<el-upload v-if="form.mainImage  == ''" name="file" class="avatar-uploader" 
						:limit='1'
						accept=".jpeg,.jpg,.png"
						:action="url" :headers="headers"
							:show-file-list="false" 
							:on-success="handleAvatarSuccess"
							:on-error="handleAvatarError"
							>
							<div>
								<el-icon class="avatar-uploader-icon">
									<Plus />
								</el-icon>
								<div class="fs12">上传图片</div>
							</div>
						</el-upload>
						<div class="relative" v-else>
							<el-image
							  class="radius8"
							  style="width: 110px; height: 110px"
							  :src="form.mainImage" 
							  :preview-src-list="[form.mainImage]">
							</el-image>
							<div 
							@click="form.mainImage = ''"
							class="absolute fs18 cursor" style="z-index: 1;width: 18px; height: 18px;top: -12px; right: -7px;border-radius: 50%;background-color: #fff;">
								<el-icon><CircleCloseFilled /></el-icon>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="详情" prop="content">
							<Editor v-model="form.content" :min-height="200" ></Editor>
							<!-- <customEditor ref="editor" :contentValue="form.content" :getContent="getContent"></customEditor> -->
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer text-right mt30">
				<el-button class="cancelSubBtn" @click="reset()">重 置</el-button>
				<el-button type="default" @click="screctSubmit(1)" class="mainSubBtn1">保存草稿</el-button>
				<el-button type="primary" @click="screctSubmit(0)" class="mainSubBtn">发 布</el-button>
			</div>
		</el-dialog>
		<!-- 类型管理 -->
		<el-dialog :title="titleFunc()" center v-model="dialogVisible1" width="716" class="radius8" :before-close="handleClose1">
			<div v-if="type == 1">
				<el-table v-loading="loading" :data="cateList" style="width: 100%" :header-row-style="{
						background: '#FAFAFA',
						color: '#0C1019',
						height: '54px',
					  }" :cell-style="{ height: '54px' }"
					  @row-click="rowClick"
					   height="350"
					  >
					<el-table-column label="分类名称"  prop="categoryName" />
					<el-table-column fixed="right" label="操作" align="center" width="100">
						<template v-slot="scope">
							<el-button size="mini" type="text" @click.stop="handleEdit(scope.row)"
								>编辑</el-button>
							<el-button size="mini" type="text" @click.stop="handleDelete(scope.row)"
								><span class="color-red">删除</span></el-button>
						</template>
					</el-table-column>
				</el-table>	
				<div slot="footer" class="dialog-footer text-right mt30">
					<el-button type="primary" @click="handleAddCate()" class="mainSubBtn">添加新分类</el-button>
				</div>
			</div>
			<div v-else>
				<el-form class="pt20" style="padding-bottom: 0;" label-width="80px" :model="cate" ref="cateRef"
					:rules="rules">
					<el-form-item label="分类名称" prop="categoryName" style="margin-right:0;">
						<el-input v-model="cate.categoryName" placeholder="请输入" class="resetInput" size="large" style="width: 534px;" />
					</el-form-item>
					<!-- <el-form-item label="图片上传" prop="imgUrl">
						<el-upload name="file" class="avatar-uploader" :action="url" :headers="headers"
							:show-file-list="false" :on-success="handleCateSuccess"
							:before-upload="beforeCateUpload">
							<img v-if="cate.imgUrl" :src="cate.imgUrl" style="width: 110px;height: 110px;" />
							<div v-else>
								<el-icon class="avatar-uploader-icon">
									<Plus />
								</el-icon>
								<div class="fs12">上传图片</div>
							</div>
						</el-upload>
					</el-form-item> -->
					<el-form-item label="分类备注" prop="remark">
						<el-input size="large" type="textarea" resize="none" class="textReset" style="width: 534px;"
							:rows="5" v-model="cate.remark" placeholder="请输入备注信息" />
					</el-form-item>
				</el-form>	
				<div slot="footer" class="dialog-footer text-right mt30">
					<el-button class="cancelSubBtn" @click="dialogVisible1 = false">取 消</el-button>
					<el-button type="primary" @click="operateCate('cateRef')" class="mainSubBtn">确 定</el-button>
				</div>
			</div>
		</el-dialog>
			
	</div>
</template>

<script>
	import { formatDate } from '@vueuse/core';
import {
		managerList,
		cateListData,//全部分类数据
		delCateList,//删除分类
		cateListAdd,//添加分类
		editCateList,//编辑分类
		cheats,//添加
		managerAmount,//数量统计
		delCheats,//删除列表数据
		cheatsDetail,//宝典详情
		editCheats//编辑秘籍宝典
	} from '@/api/business/screct.js'
	import {
		getToken
	} from "@/utils/auth";
	let url = import.meta.env.VITE_APP_BASE_API + "/common/upload"
	export default {
		data() {
			return {
				headers: {
					Authorization: 'Bearer ' + getToken() // 这里的getToken方法需要你自己实现，用于获取你的Token
				},
				url: url,
				bs_performance_targettype: this.useDict('bs_performance_targettype').bs_performance_targettype,				
				tabArr:[
					{
						id:'',
						name:'全部秘籍',
						total:0,
					},
					{
						id:0,
						name:'已发布',
						total:0,
					},
					{
						id:1,
						name:'草稿箱',
						total:0,
					}
				],
				queryParams:{
					pageNum:1,
					pageSize:10,
					title:'',//名称
					categoryIds:'',//array[string]分类id数组
					type:1,//默认1
					status:'',//0 已发布1 草稿
					startTime:'',//开始时间
					endTime:'',//结束时间
				},
				list:[],
				total:0,
				dialogVisible: false,
				form: {
					mainImage: '',
					title: '',
					categoryId: '',
					description: '',
					content: '',
					status:'',//0已发布  1 草稿
					remark:'',//备注
				},
				isEdit:0,//0：发布 1：编辑
				rules: {
					title: [
						{required: true,message: '请输入',trigger: 'blur'},
					],
					categoryId: [
						{required: true,message: '请选择',trigger: 'change'},
					],
					mainImage: [
						{required: true,message: '请选择',trigger: 'change'},
					],
					description: [
						{required: true,message: '请输入',trigger: 'blur'},
					],
					content: [
						{required: true,message: '请输入',trigger: 'blur'},
					],
				},
				dialogVisible1:false,
				type:1,//1：分类 2：添加
				cateList:[],//全部分类
				cate:{
					categoryName:'',
					remark:'',
					imgUrl:''
				}
			}
		},
		created() {
			this.getList()
			this.cateListData()
			
		},
		methods: {
			handleDetail(item){
				this.$router.push('/sort/sortDetail/' + item.id)
			},
			getManagerAmount(){
				let data = {
					type:1
				}
				managerAmount(data).then(res=>{
					let data = res.data
					let all = 0
					for(let key in data){
						if(data[key].status == '0'){
							//已发布
							this.tabArr[1].total = data[key].viewCount
						}else{
							//草稿
							this.tabArr[2].total = data[key].viewCount
						}
						all+=data[key].viewCount*1
					}
					this.tabArr[0].total = all
				})
			},
			titleFunc(){
				switch (this.type){
					case 0:
						return '添加分类'
						break;
					case 1:
						return '分类管理'
						break;	
					case 2:
						return '编辑分类'
						break;		
					default:
						break;
				}
			},
			// 获取列表
			getList(){
				managerList(this.queryParams).then(res=>{
					this.list = this.list.concat(res.rows)
					this.total = res.total
					this.getManagerAmount()
				})
			},
			changeTab(item){
				this.queryParams.status = item.id
				this.queryParams.pageNum = 1
				this.list = []
				this.getList()
			},
			// 加载更多
			loadMore(){
				if(this.total == this.list.length){
					return false
				}
				this.queryParams.pageNum+=1
				this.getList()
			},
			// 全部分类
			cateListData(){
				cateListData().then(res=>{
					this.cateList = res.data
				})
			},
			//发布秘籍按钮
			handleSend(){
				this.isEdit = 0
				this.dialogVisible = true
			},
			//编辑分类
			handleEdit(row){
				this.type = 2
				this.cate = {
					id:row.id,
					categoryName:row.categoryName,
					remark:row.remark,
				}
			},
			//分类管理按钮
			dialogCate(){
				this.dialogVisible1 = true
				this.type = 1
			},
			handleClose() {
				this.dialogVisible = false
			},
			handleAvatarSuccess(e) {
				this.form.mainImage = e.url
			},
			handleAvatarError(e){
				console.log(e,'error')
			},
			beforeAvatarUpload(e) {
				console.log(e, 'e2')
			},
			handleClose1() {
				this.dialogVisible1 = false
			},
			// 点击分类
			rowClick(row, event, column){
				console.log(row,event,column)
				this.form.categoryName = row.categoryName
				this.form.categoryId = row.id
				this.dialogVisible1 = false
			},
			
			//删除分类
			handleDelete(row) {
				const ids = row.id
				let that = this
				this.$modal
					.confirm('是否确认删除编号为"' + ids + '"的数据项？')
					.then(function() {
						delCateList(ids).then(res => {
							if(res.code == 200){
								that.getList()
								this.$modal.msgSuccess("删除成功");
							}
						})
					})
					.catch(() => {});
			},
			//添加分类上传图片
			handleCateSuccess(){
				
			},
			handleAddCate(){
				this.type = 0
				this.cate = {
					categoryName:'',
					remark:'',
					imgUrl:''
				}
			},
			//添加新分类
			operateCate(){
				if(this.type == 0){
					cateListAdd(this.cate).then(res=>{
						this.dialogVisible1 = false
						this.cateListData()
					})
				}else if(this.type == 2){
					//编辑分类
					editCateList(this.cate).then(res=>{
						this.dialogVisible1 = false
						this.cateListData()
					})
				}
				
			},
			// 重置
			reset(){
				this.form = {
					mainImage: '',
					title: '',
					categoryId: '',
					description: '',
					content: '',
					status:'',//0已发布  1 草稿
					remark:'',//备注
				}
			},
			//删除秘籍宝典
			handleItem(row) {
				const ids = row.id 
				let that = this
				this.$modal
					.confirm('是否确认删除秘籍编号为"' + ids + '"的数据项？')
					.then(function() {
						delCheats(ids).then(res => {
							that.list = []
							that.getList()
							that.$modal.msgSuccess("删除成功");
						})
					})
					.catch(() => {});
			},
			//编辑秘籍宝典-获取详情
			cheatsDetail(row){
				cheatsDetail(row.id).then(res=>{
					this.dialogVisible = true
					this.isEdit = 1
					this.form = res.data
				})
			},
			//
			editCheats(row){
				editCheats(row.id).then(res=>{
					
				})
			},
			//获取富文本
			getContent(content){
				
				this.form.content = content
			},
			//发布秘籍
			screctSubmit(num){
				this.form.status = num
				
				this.$refs['formRef'].validate((valid) => {
					if (valid) {
						//添加
						if(this.isEdit == 0){
							cheats(this.form).then(res=>{
								this.dialogVisible = false
								this.getList()
								this.getManagerAmount()
							})
						}else{
							//编辑
							editCheats(this.form).then(res=>{
								this.dialogVisible = false
								this.list = []
								this.getList()
								this.getManagerAmount()
							})
						}
						
					}	
				})
			}
		}
	}
</script>

<style>
	.tabItem {
		display: inline-block;
		width: 100px;
		height: 38px;
		line-height: 38px;
		border-radius: 4px;
		border: 1px solid #677585;
		color: #677584;
	}

	.active {
		background: #4DACB1;
		border: 1px solid #4DACB1;
		color: #fff;
	}

	.border1 {
		border: 1px solid #DCDFE6;
	}

	.loadMore {
		width: 100px;
		height: 38px;
		border-radius: 4px;
		border: 1px solid #D9D9D9;
		display: inline-block;
		text-align: center;
		line-height: 38px;
		font-size: 14px;
	}

	.avatar-uploader .el-upload {
		background: #F7F8FA;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
		width: 110px;
		height: 110px;
		text-align: center;
		line-height: 22px;
		color: #8c939d;
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		text-align: center;
	}
	.edit{
		position: absolute;
		right: 30px;
		color: #677585;
		font-size: 14px;
	}
	.edit span:hover{
		color: #4DACB1;
	}
</style>